import React  from 'react';
/**
 * 安装  immutable
 * npm install immutable
 */
import { Map,List,fromJS } from 'immutable'

// immutable解决上面两个深拷贝的缺点
class App extends React.Component{
  
  componentDidMount() {
    // map 操作
    console.log("===================immutableMap 操作==================")
    this.testImmutableMap()
    // list 操作
    console.log("===================immutableList 操作=================")
    this.testImmutableList()
  
    console.log("===================immutableFromJS 操作=================")
    this.testFromJS()
  }

  //Map()方法只能转化第一层，对象内嵌套的引用类型，得一层层转化（且当了解，后面用fromJS一次性转化）：
  testImmutableMap(){
    const obj = {name: 'qmz', age: 100}

    // 将map 转化成 immutable 对象
    const oldImmuObj = Map(obj) 
    // 修改属性值 .set
    const newImmuObj = oldImmuObj.set("name", "you") 
    // 获取值immutable
    // 方式1： .get
    console.log(oldImmuObj.get('name'), newImmuObj.get('name')) // qmz you

    const obj1 = {name: 'qmz', child: {name: 'baby', age: 1}}
    const obj2 = {name: 'qmz', child: Map({name: 'baby', age: 1})}
    console.log(obj1, obj2)

  }

  testImmutableList(){
   
    const arr = [1,2,3]

    // 转化为immutable类型
    const oldArr = List(arr)

    // List的增删改和普通数组Array的方法一样：push、concat、map、splice等方法
    const newArr1 = oldArr.push(4)
    const newArr2 = oldArr.concat([4,5,6])
    console.log(oldArr, newArr1, newArr2) // 打印对比一下
   
    // toJS()方法转为普通数组
    console.log(newArr2.toJS()) // [1,2,3,4.5,6]

  }


  // fromJS方法（复杂结构一键式转化） 
  testFromJS(){
    var obj = {
      name: 'major',
      location: {
          province: '广东',
          city: '广州'
      },
      favor: ['跳舞', '骑行', '逛街']
    }
    
    // 1、fromJS和toJS相互一次性转换
    var objImmu = fromJS(obj)
    // 相当于
    /* 
    const objImmu = Map({
        name: 'major',
        location: Map({
            province: '广东',
            city: '广州'
        }),
        favor: List(['跳舞', '骑行', '逛街'])
    }) */
 

    console.log('objImmu:', objImmu)
    console.log('objImmu.toJS():', objImmu.toJS()) // 转成普通对象（obj）格式
    
    // 获取数据
    console.log(objImmu.get("location").get("province"))
    
    // 2、修改方法：setIn、updateIn
    objImmu = objImmu.setIn(['name'],'major变啦') // 相当于 obj.name = 'major变啦'
    objImmu = objImmu.setIn(['location', 'city'],'深圳') // 相当于 obj.location.city = '深圳'
    objImmu = objImmu.setIn(['favor', 0],'爵士舞') // 相当于 obj.favor[0] = '爵士舞'
    objImmu = objImmu.updateIn(['favor'], arr => arr.splice(2, 1)) // 相当于 obj.favor.splice(2, 1))
    console.log('objImmu:', objImmu)
  
  }
  

 

  render (){
    return (
      <div>
        <div> immutable 操作</div>
      </div>
      )
  }
}

export default App;
